<template>
    <div class="floow">
      <div class="title">
        <img src="../img/myfloow/back.png" alt="" class="img1" @click="back">
        <span>我的音乐</span>
        <img src="../img/myyinyue/yinp.png" alt="" class="img2">
      </div>
      <div class="list">
        <ul>
          <li v-for="(key,item) in userGzhuList">
            <span class="s1">
              <img :src=userGzhuList[item][item].avatarUrl alt="">
            </span>
            <span class="s2">
              <span class="stop">
                <span> {{userGzhuList[item][item].nickname}}</span>
                <span v-if="userGzhuList[item][item].gender === 1">
                  <img src="../img/foulist/nan.png" alt="">
                </span>
                 <span v-else="userGzhuList[item][item].gender !== 1">
                  <img src="../img/foulist/nv.png" alt="">
                </span>
              </span>
              <br>
              <span class="sbtn">{{userGzhuList[item][item].signature}}</span>
              <span class="simg">
                <img src="../img/myfloow/more.png" alt="">
              </span>
            </span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "myfloow",
        methods:{
          back(){
            this.$router.go(-1);
          }
        },
        computed:{
          ...mapState(['userGzhuList'])
        },
        created(){
          this.$api.getUserGzhu({uid:this.$storage.get('user').account.id});
        }
    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .floow{
    width: 1245px;
    .title{
      box-sizing: border-box;
      background-color: #c64b3e;
      padding: 85px 0 30px 0;
      font-size: 50px;
      color: white;
      position: relative;
      text-align: center;
      font-weight: bold;
      img{
        width: 85px;
        position: absolute;
        vertical-align: middle;
      }
      .img1{
        left: 40px;
      }
      .img2{
        right: 50px;
      }
      span{
        display: inline-block;
        margin: 0 auto;
        vertical-align: middle;
      }
    }
    .list{
      margin-bottom: 200px;
      ul{
        margin-top: 20px;
        li{
          list-style: none;
          font-size: 0;
          margin-bottom: 22px;
          .s1{
            display: inline-block;
            width: 165px;
            height: 165px;
            border-radius: 50%;

            margin-left: 30px;
            vertical-align: middle;
            img{
              width: 165px;
              height: 165px;
              border-radius: 50%;
            }
          }
          .s2{
            display: inline-block;
            width: 1050px;
            font-size: 50px;
            vertical-align: middle;
            padding: 45px 30px;
            position: relative;
            font-weight: bold;
            box-sizing: border-box;
            border-bottom: 1px solid #e2e2e3;
            .stop{
              span{
                vertical-align: middle;
                display: inline-block;
                img{
                  width: 60px;
                  vertical-align: middle;
                  object-fit: cover;
                }
              }
            }
            .sbtn{
              color: #7d7d7e;
              font-size: 35px;
              width: 880px;
              display: block;
              overflow:hidden;
              text-overflow:ellipsis;
              box-sizing: border-box;
              padding-top: 20px;
              white-space:nowrap
            }
            .simg{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 30px;
              img{
                width: 70px;
                height: 40px;
                object-fit: cover;
                vertical-align: middle;
              }

            }
          }
        }
      }
    }
  }
</style>
